import React, { useMemo, useState } from 'react'
import './App.css'
import Header from './components/Header'
import Main,{TodoListType} from './components/Main'
import Footer from './components/Footer'

export default function App() {
  const [todoList, settodoList] = useState([{
    id:1,
    isDone:false,
    title:'Pick up groceries'
  }])
  const [select, setSelect] = useState('all')
 
  const handleUpdataTodoList = (value:string)=>{
    // console.log(value);
    let id = todoList.length === 0 ? 1 : todoList[todoList.length-1].id + 1
    let obj = {
      id,
      isDone:false,
      title:value

  }
    settodoList([
      ...todoList,
      obj
    ])

  }
  const handleDeleteTodoList = (id:number)=>{
    // console.log(id);
   settodoList(todoList.filter(item => item.id !== id)) 
    
  }
  const handleCheckedIsDoneById = (id:number)=>{
    console.log(id);
    settodoList(todoList.map(item => ({
      ...item,
      isDone:item.id === id ? !item.isDone : item.isDone
    })))
  }
  const handleClearComplete = () => { 
    settodoList(todoList.filter(item => item.isDone === false))
  }
  const handleSelectClick = (value:string) => { 
    setSelect(value)
    // settodoList(selectedList)
   }
    const selectedList:()=>TodoListType[] = () => {
    if(select === 'active') {
      console.log('active');
      return todoList.filter(item => item.isDone === false)
    }
    if(select === 'complete') {
      console.log('complate');
      return todoList.filter(item => item.isDone === true)
    }
    return todoList
  }
  return (
    <div className='app'>
      <Header handleUpdataTodoList={handleUpdataTodoList}/>
    <div className="app-main">
        <Main todolist={selectedList()} handleDeleteTodoList={handleDeleteTodoList} 
        handleCheckedIsDoneById={handleCheckedIsDoneById} />
        <Footer todolist={todoList} handleClearComplete={handleClearComplete} 
        handleSelectClick={handleSelectClick} select={select}/>
  
    </div>
    </div>
  )
}
